<template>
    <el-dialog class="elDialog" :title="wintitle" :visible.sync="isShow" width="88%" :lock-scroll="true" :close-on-click-modal="false">
        <div class="dialog">
            <div class="top">
                <zy-select :fromValue="queryForm" :formConfig="formConfig" @search="search" @resetForm="resetForm"></zy-select>
            </div>
            <div class="bottom">
                <zy-table :tableData="tableData" :tableColumn="tableColumn" :pageSize="pagination.pageSize" :total="pagination.total" @changePage="changePage"></zy-table>
                <zy-dialog ref="zyDialog" />
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { column_1, colors, suggestSpan, formConfig1 } from './formConfig.js'
import zyTable from '@/components/common/zyTable.vue'
import { requestApi } from '@/requset/api'
import { mapState } from 'vuex'
import zySelect from '@/components/common/zySelect.vue'
import { deepClone } from '@/plugins/clone'
import zyDialog from '@/components/common/zyDialog.vue'
export default {
    data() {
        return {
            wintitle: '',
            isShow: false,
            tableData: [],
            pagination: {
                pageSize: null,
            },
            tableColumn: null,
            val: null,
            formConfig: null,
            queryForm: {
                start_time: null,
                end_time: null,
                modelcode: null,
                model_map: null,
                page: 1,
                id: null,
            },
        }
    },
    components: { zyTable, zyDialog, zySelect },
    computed: {
        ...mapState('backstage', ['eigenvalueTags']),
    },
    methods: {
        doOpen(e) {
            this.val = e
            this.isShow = true
            this.page = 1
            this.search()
        },
        getList(obj) {
            obj.page = this.page
            requestApi('post', 'algtest/result/getlist', obj, true).then((res) => {
                let list = res.data.data
                if (res.data.code == 0 && list.length != 0) {
                    this.tableData = list
                    this.pagination = res.data.pagination
                } else {
                    if (list.length == 0) {
                        this.tableData = []
                        this.pagination = {}
                        return
                    }
                    this.$message({
                        type: 'info',
                        message: '网络异常或暂无数据,请稍后重试',
                    })
                }
            })
        },
        resetForm() {
            this.queryForm = {
                start_time: null,
                end_time: null,
                modelcode: null,
                model_map: null,
                page: 1,
                id: null,
            }
            this.search()
        },
        search() {
            this.queryForm.id = this.val.id
            this.getList(this.queryForm)
        },
        changePage(e) {
            this.queryForm.page = e
            this.search()
        },
        handle1(e) {
            let { fileContent, fileName } = e
            this.downloadTxtFile(fileContent, fileName)
        },
        downloadTxtFile(textData, filename) {
            // 创建一个Blob对象
            const blob = new Blob([textData], { type: 'text/plain' })
            // 创建一个链接元素
            const a = document.createElement('a')
            a.href = window.URL.createObjectURL(blob)
            a.download = filename

            // 提示下载中
            this.$message.success('正在下载...')
            // 模拟点击事件触发下载
            a.click()
            // 清除链接对象的URL
            window.URL.revokeObjectURL(a.href)
            // 下载完成后的提示
            this.$message.success('下载成功')
        },
    },
    created() {
        this.formConfig = formConfig1

        this.tableColumn = column_1
        column_1[column_1.length - 1].buttons = [
            {
                text: '下载文件',
                click: (val) => this.handle1(val),
                icon: 'el-icon-s-comment',
            },
        ]
    },
}
</script>

<style lang="less" scoped>
.elDialog {
    .dialog {
        width: 100%;
        height: 70vh;
        position: relative;

        .top {
            position: absolute;
            top: 0;
            width: 100%;
            height: 120px;
        }

        .bottom {
            position: absolute;
            top: 120px;
            width: 100%;
            height: 50vh;
        }
    }
}
</style>
